<template>
  <div id="list">
  	<ul v-if="currentList=='群聊'">
<!--群聊列表-->
			<p style="padding: 2px 4px;height: 20px">群聊列表</p>
			<li :class="{ active: currentSession?'群聊'== currentSession.password:false }"
					v-on:click="changeCurrentSession(chatObj)">
				<i class="fa fa-group"></i>
				<el-badge :is-dot="isDot[user.username+'#群聊']"><p class="name">群聊</p></el-badge>
			</li>
			</ul>
<!--机器人-->
		<ul v-if="currentList=='机器人'">
			<p style="padding: 2px 4px;height: 20px">快来和机器人聊天吧！</p>
			<li :class="{ active: currentSession?'机器人'== currentSession.username:false }"
					v-on:click="changeCurrentSession(robotObj)">
				<i class="fa fa-grav"></i>
				<p class="name">机器人(智能回复)</p>
			</li>
		</ul>

	  <ul v-if="currentList=='日历'">
<!--		  <p style="padding: 2px 4px;height: 20px">日历</p>-->
<!--		  <li :class="{ active: currentSession?'机器人'== currentSession.username:false }"-->
<!--			  v-on:click="changeCurrentSession(robotObj)">-->
<!--			  <img class="avatar" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2548892998,499717296&fm=26&gp=0.jpg">-->
<!--			  <p class="name">日历</p>-->
<!--		  </li>-->
	  </ul>

	  <div v-if="currentList=='天气'">
		  <iframe id="frame-standard" seamless="seamless" width="100%" height="980px" frameborder="0" allowtransparency="true" src="https://widget-page.qweather.net/h5/index.html?md=0123456&bg=1&lc=accu&key=789ead1953774191a8a3d4f158caea49&v=_1636030980340">

		  </iframe>
	  </div>
	  <!--网盘列表-->
<!--	  <el-scrollbar      wrap-class="fileList" wrap-style="height:600px;"-->
<!--						 view-style="height:100%;" :native="false">-->
		  <ul v-if="currentList=='1'" style="width: 500px" >
			  <p style="padding: 2px 4px;height: 20px">网盘列表</p>
			  <el-table
					  :data="fileList"

					  style="width: 100%">
<!--				  <el-table-column-->
<!--						  label="日期"-->
<!--						  width="180">-->
<!--					  <template slot-scope="scope">-->
<!--						  <i class="el-icon-time"></i>-->
<!--						  <span style="margin-left: 10px">{{ scope.row.date }}</span>-->
<!--					  </template>-->
<!--				  </el-table-column>-->
				  <el-table-column
						  label="文件名"
						  width="105">
					  <template slot-scope="scope">
						  <el-popover trigger="hover" placement="left">
							  <p>文件名: {{ scope.row.filename }}</p>
							  <p>创建日期: {{ scope.row.date}}</p>
							  <div slot="reference" class="name-wrapper">
								<span style="margin-left: 10px">{{ scope.row.filename }}</span>
							  </div>
						  </el-popover>
					  </template>
				  </el-table-column>
				  <el-table-column label="操作">
					  <template slot-scope="scope">
						  <el-button
								  size="mini"
								  @click="handleEdit(scope.row.filename)">下载</el-button>
						  <el-button
								  size="mini"
								  type="danger"
								  @click="handleDelete(scope.row.filename)">删除</el-button>
					  </template>
				  </el-table-column>
			  </el-table>
		  </ul>
<!--	  </el-scrollbar>-->


		<el-scrollbar      wrap-class="userList" wrap-style="height:600px;"
											  view-style="height:100%;" :native="false">
		<ul v-if="currentList=='私聊'" >
			<p style="padding: 2px 4px;height: 20px">用户列表</p>
  		<li v-for="item in users" :class="{ active: currentSession?item.username === currentSession.username:false }"
					v-on:click="changeCurrentSession(item)"><!--   :class="[item.id === currentSession ? 'active':'']" -->
				<div style="display: flex;justify-content: space-between">
					<div>
						<el-badge :is-dot="isDot[user.username+'#'+item.username]" style="">
							<el-image class="avatar"
												:preview-src-list="[item.userProfile]"
												:src="item.userProfile"
												:alt="item.nickname">
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline"></i>
								</div>
							</el-image>
						</el-badge>
						<p class="name">{{item.username}}</p>
					</div>
					<div>
					<el-badge :value="item.userStateId==1?'在线':'离线'" :type="item.userStateId==1?'danger':'info'"></el-badge>
					</div>
				</div>
  		</li>
  	</ul>
		</el-scrollbar>


  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'list',
  data () {
    return {
			user:this.$store.state.currentUser,
			chatObj:{username:'群聊',nickname:'群聊'},//群聊实体对象（为方法复用而构造，对于User对象）
			robotObj:{
				username:'机器人',
				nickname:'机器人',
			  userProfile:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2548892998,499717296&fm=26&gp=0.jpg'
			}
    }
  },
  computed: mapState([
  //'sessions',//this.sessions映射成this.$store.state.sessions
	'users',
   'fileList',
  'currentSession',
	'isDot',
	'currentList'
	]),
  methods:{
	  handleEdit(filename) {
		  this.$confirm('下载【'+filename+'】, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
		  }).then(() => {
			  this.postRequest("/fileDowload/"+filename).then(resp=>{
				  if (resp){
					  //刷新表格
					  location.reload();
				  }
			  })
		  }).catch(() => {
			  this.$message({
				  type: 'info',
				  message: '已取消下载'
			  });
		  });

	  },
	  initUserData(){

	  },
	  handleDelete(filename) {
		  this.$confirm('此操作将永久删除文件【'+filename+'】, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
		  }).then(() => {
			  this.deleteRequest("/fileDelete/"+filename).then(resp=>{
				  if (resp){
					  //刷新表格
					location.reload();
				  }
			  })
		  }).catch(() => {
			  this.$message({
				  type: 'info',
				  message: '已取消删除'
			  });
		  });
		  console.log(filename);
	  },
  	changeCurrentSession:function (currentSession) {
  		this.$store.commit('changeCurrentSession',currentSession)
  	}
  }
}
</script>

<style lang="scss" scoped>
#list {
	ul{
		margin-left: 0px;
		padding-left: 0px;
		margin-left: 2px;
	}
	li {
		padding-top: 14px;
		padding-bottom: 14px;
		//padding-right: 40px;
		//border-bottom: 1px solid #292C33;
		list-style: none;
		cursor: pointer;
		&:hover {
			background-color: #D8D6D6;
		}
	}
  li.active {/*注意这个是.不是冒号:*/
			background-color: #C8C6C6;
	}
	.avatar {
		border-radius: 2px;
		width: 30px;
		height: 30px;
		vertical-align: middle;
	}
	.name {
		display: inline-block;
		margin-left: 15px;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.stateItem {//在线状态的样式
		/*position: absolute;*/
		/*left: 160px;*/
		//margin-left: 100px;
		//margin-right: 10px;
	}
	.userList{
		max-height: 600px;
	}
	.fileList{
		max-height: 600px;
	}
	.el-scrollbar__wrap.default-scrollbar__wrap {
		overflow-x: auto;
	}
}
</style>
